<template>
  <FModal @close="closed" header="业务关联配置" body-height="650"
          width="1200" ref="refFModal">
    <HorLayout>
      <template #left>
        <div style="width: 240px">
          <FSection>
            <template #title>
              <div style="flex: 1">
                关联单据
              </div>
              <el-button @click="addNewRelation"
                         style="float: right; margin-right: 10px" icon="plus" size="small" circle/>
            </template>
            <FListV2 :data-source="relations" title-name="relationName"
                     key-name="id" @select="relationSelect" :selected-key="selectedKey">
              <template #default="{item}">
                <div class="item-label">
                  <div style="flex: 1">
                    {{ item.relationName }}
                  </div>
                  <el-button icon="close" @click="() => removeRelation(item)"
                             circle size="small" style="margin-right: 5px"/>
                </div>
              </template>
            </FListV2>
          </FSection>
          <FSection>
            <template #title>
              <div style="flex: 1">
                触发单据
              </div>
              <el-button style="float: right; margin-right: 10px" icon="plus" size="small" circle/>
            </template>
          </FSection>
        </div>
      </template>

      <FPage>
        <TriggerForm v-if="showType === 'TriggerForm'" ref="refTriggerForm"/>
        <RelationForm @saved="relationSaved"
                      v-if="showType === 'RelationForm'" ref="refRelationForm"/>
      </FPage>
    </HorLayout>
    <template #footer>
      <el-button @click="close" type="warning" round icon="cancel">关闭</el-button>
    </template>
  </FModal>
</template>
<script setup>
import FModal from '@/components/FModal/index.vue';
import {nextTick, shallowRef} from 'vue';
import HorLayout from '@/components/layout/HorLayout.vue';
import FSection from '@/components/FSection/index.vue';
import FPage from '@/components/layout/FPage.vue';
import TriggerForm from '@/components/app/FormRelation/TriggerForm/index.vue';
import RelationForm from '@/components/app/FormRelation/RelationForm/index.vue';
import {deleteAction, getAction} from '@/request/BaseRequest';
import FListV2 from '@/components/FListV2/index.vue';
import {ElMessageBox} from 'element-plus';

const loading = shallowRef(false);
const refFModal = shallowRef();
const refTriggerForm = shallowRef();
const refRelationForm = shallowRef();
const selectedKey = shallowRef();
const relations = shallowRef([]);
const showType = shallowRef(undefined);
let formName = undefined;

function setData(_formName) {
  formName = _formName;
  refFModal.value.open();
  loadDatas();
}

function close() {
  refFModal.value.close();
}

function loadDatas() {
  loadRelations();
}

function relationSaved(relationId) {
  loadRelations();
  selectedKey.value = relationId;
  refRelationForm.value.edit(relationId);
}

function loadRelations() {
  loading.value = true;
  getAction('/plat/platRelation/loadRelationsByOriginFormName',
    {formName}).then(data => {
    loading.value = false;
    if (data.success) {
      relations.value = data.result;
    }
  });
}

function removeRelation(relation) {
  ElMessageBox.confirm('删除后不可恢复, 确定删除吗', {
    draggable: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    loading.value = true;
    deleteAction('/plat/platRelation/removeById', {id: relation.id}).then(data => {
      loading.value = false;
      if (data.success) {
        selectedKey.value = undefined;
        showType.value = undefined;
        loadDatas();
      }
    });
  }).catch(() => {
  });
}

function closed() {
  selectedKey.value = undefined;
  showType.value = undefined;
}

function relationSelect(relation) {
  selectedKey.value = relation.id;
  showType.value = 'RelationForm';
  nextTick(() => {
    refRelationForm.value.edit(relation.id);
  });
}

function addNewRelation() {
  showType.value = 'RelationForm';
  selectedKey.value = undefined;
  nextTick(() => {
    refRelationForm.value.addNew(formName);
  });
}

defineExpose({
  setData
});
</script>
<script>
export default {
  name: 'FormRelation'
};
</script>
<style scoped>
.item-label {
  height: 100%;
  display: flex;
  align-items: center;
}
</style>
